<template>
	<view class="content">
		<scroll-view class="nav" scroll-x :scroll-left="scrollLeft">
			<view class="nav_box">
				<block v-for="(item, index) in navList" :key="index">
					<view class="nav_item" @tap="navClick(index)" :class="{ nav_active: item.is_result }">{{ item.subject_name }}</view>
				</block>
			</view>
		</scroll-view>
		<view class="none" v-if="dataList.length==0">
			<text>该科目下暂无练习记录！</text>
		</view>
		<view class="progre_box" v-else>
			<view class="cont" v-for="(item,index) in dataList" :key="index">
				<view class="cont-title">
					<view class="cont-title-title">{{item.section_name}}</view>
					<view class="cont-title-btn_check" @tap='checkWitreport(item)'>查看报告</view>
				</view>
				<view class="cont-info">
					<view>上次练习至{{item.question_num}}题</view>
					<view>{{item.lastTime}}</view>
				</view>
			</view>
			<uni-load-more v-if="dataList.length>5" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
import cDate from '@/common/util.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	data() {
		return {
			scrollLeft: 0,
			currentNav: 0,
			navList: [],
			dataList: [],
			student_id: '',
			sid: '',
			status: 'more',
			reload: true,
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多',
				contentnot: "没数据"
			},
			page: 1
		};
	},
	components: {
		uniLoadMore
	},
	onPullDownRefresh() {
		this.reload = true;
		this.page=1;
		this.last_id = '';
		this.getList();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = this.page + 1;
		var _this = this;
		setTimeout(function(){
			_this.getList();
		},500);
	},
	onLoad(e) {
		this.student_id = e.student_id;
		/* 获取科目列表 */
		this.$zapi.apiPost('user/subject.Lists/subjectLists',{student_id:this.student_id}).then(res => {
			if(res.data.code == 200) {
				let navList = res.data.data
				navList[0].is_result = true
				this.navList = navList;
				this.sid = this.navList[0].sid;
				this.getList();
			}
		})
	},
	methods: {
		// 跳转查看报告
		checkWitreport(item) {
			// 将传递过来对应的单元名称等属性放到缓存中，以便查看报告页面进行获取
			uni.setStorageSync('question_obj', item)
			uni.navigateTo({
				url: `./child-wit-report`
			})
			
		},
		/* 切换科目 */
		navClick(index) {
			this.currentNav = index;
			for (let i = 0; i < this.navList.length; i++) {
				if (i == index) {
					this.navList[i].is_result = true;
				} else {
					this.navList[i].is_result = false;
				}
			}
			this.sid = this.navList[index].sid;
			this.page = 1;
			this.reload = true;
			this.getList();
		},
		/* 获取记录列表 */
		getList() {
			var data = {
				pagesize:8,
				page: this.page,
				subjectid: this.sid,
				student_id: this.student_id
			}
			this.$zapi.apiPost('user/Practice.User/PracticeList',data).then(res => {
				if(res.data.code == 200) {
					let dataList = res.data.data.data
					for (let i = 0; i < dataList.length; i++) {
						var date = cDate.getFormatTime(dataList[i].update_time)
						dataList[i].lastTime = date
						dataList[i].is_collect = false
					}
					this.dataList = this.reload ? dataList : this.dataList.concat(dataList);
					this.reload = false;
					this.status='more';
				} else {
					if(this.reload){
						this.dataList=[];
					}else{
						this.status='noMore';	
					}
				}
			})
		}
	}
}
</script>

</style>
<style>
page {
	background: #FAFAFA;
}
.content{
	position: absolute;
	height: 100%;
	width: 100%;
}
.nav{
	width: 100%;
	height: 100upx;
	color: #FFFFFF;
	background-color: #FF9900;
	position: fixed;
}
.nav_box{
	display: flex;
	white-space: nowrap;
}
.nav_item {
	display: flex;
	align-items: center;
	height: 100upx;
	line-height: 80upx;
	padding: 0 30upx;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 30upx;
}

.nav_active {
	font-weight: bold;
}

.nav_active:after {
	content: '';
	line-height: 100upx;
	background: #fff;
	height: 4upx;
	width: 28upx;
	font-weight: bold;
}
.none{
	color: #666666;
	text-align: center;
	height: 500upx;
	line-height: 500upx;
}
.progre_box{
	margin-top: 100upx;
	/* position: absolute; */
	/* z-index: -1; */
}
.cont{
	display: flex;
	margin-top: 10upx;
	justify-content: space-between;
	flex-direction: column;
	background: #FFFFFF;
}
.cont-title{
	display: flex;
	margin: 22upx 32upx;
	justify-content: space-between;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333333;
}
.cont-title-title {
	white-space: normal;
	font-size: 38upx;
}
/* 查看报告按钮样式 */
.cont-title-btn_check{
	margin: auto 0;
	padding: 0 20upx;
	background: rgba(255,153,0,1);
	color: #fff;
	border-radius: 23px;
}
.cont-info{
	display: flex;
	margin: 0 32upx;
	justify-content: space-between;
	color: #666666;
}
</style>
